<!-- 部门管理-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理系统</title>
    <script src="static/js/jquery-3.4.1.min.js"></script>
    <script src="static/layui/layui.js"></script>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <style>
        body {
            padding: 15px;
            background-color: #f2f2f2;
        }
        .layui-card {
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
            padding: 15px;
        }
        .layui-table-view {
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        .layui-table td, .layui-table th {
            padding: 12px 15px;
        }
        .layui-form-label {
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
        .layui-btn-container {
            padding: 10px 15px;
        }
        .layui-layer-title {
            background: #1E9FFF;
            color: #fff;
            border: none;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">部门管理</div>
    <div class="layui-card-body">
        <script type="text/html" id="dept-insert">
            <form class="layui-form" method="post" style="padding: 20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-block">
                        <input id="dept-name" type="text" name="name" required lay-verify="required" placeholder="请输入部门名称，如：人事部" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">部门描述</label>
                    <div class="layui-input-block">
                        <textarea id="dept-description" name="description" placeholder="请输入部门描述..." class="layui-textarea" style="min-height: 100px;"></textarea>
                    </div>
                </div>
            </form>
        </script>

        <table class="layui-hide" id="dept-table" lay-filter="dept-table"></table>

        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal" lay-event="addDept">
                    <i class="layui-icon layui-icon-add-1"></i> 添加部门
                </button>
            </div>
        </script>

        <script type="text/html" id="barTpl">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
                <i class="layui-icon layui-icon-ok"></i> 保存
            </a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </a>
        </script>
    </div>
</div>

<script>
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#dept-table',
            url:'/depts',
            toolbar: '#toolbar',
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.size,
                    data: res.data
                }
            },
            cols: [[
                {field:'id', width:80, title: 'ID', sort: true},
                {field:'name', width:200, title: '部门名称', edit: 'text'},
                {field:'description', width:300, title:'部门描述', edit: 'text'},
                {field:'createdTime', width:180, title: '创建时间', sort: true},
                {fixed: 'right', width:180, align:'center', toolbar: '#barTpl'}
            ]],
            page: true,
            text: {
                none: '暂无部门数据'
            },
            skin: 'line',
            even: true,
            done: function() {
                $('.layui-table-box').css('border-radius', '5px');
                $('.layui-table-page').css('text-align', 'center');
            }
        });

        table.on('toolbar(dept-table)', function (obj) {
            switch(obj.event){
                case 'addDept':
                    layer.open({
                        title: '添加新部门',
                        content: $('#dept-insert').html(),
                        type: 1,
                        area: ["500px", "350px"],
                        btn: ['确认', '取消'],
                        yes: function(index, layero){
                            var name = layero.find('input[name="name"]').val();
                            var description = layero.find('textarea[name="description"]').val();

                            if(!name || !description) {
                                if(!name) {
                                    layer.tips('部门名称不能为空', 'input[name="name"]', {tipsMore: true});
                                }
                                if(!description) {
                                    layer.tips('部门描述不能为空', 'textarea[name="description"]', {tipsMore: true});
                                }
                                return;
                            }

                            var nowDate = new Date();
                            $.ajax({
                                url: '/depts',
                                method: 'post',
                                data: {
                                    name: name,
                                    description: description,
                                    createdTime: nowDate
                                },
                                success: function (res) {
                                    if (res.code == 200) {
                                        layer.msg('新建部门成功', {icon: 1});
                                        layer.close(index);
                                        table.reload('dept-table');
                                    } else {
                                        layer.msg('新建部门失败: ' + res.msg, {icon: 2});
                                    }
                                },
                                error: function() {
                                    layer.msg('请求失败', {icon: 2});
                                }
                            });
                        }
                    });
                    break;
            }
        });

        //监听工具条(右侧)
        table.on('tool(dept-table)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;

            if(layEvent === 'edit'){
                $.ajax({
                    url: '/depts',
                    method: 'put',
                    data: JSON.stringify({
                        id: data.id,
                        name: data.name,
                        description: data.description
                    }),
                    contentType: "application/json",
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg('更改部门信息成功', {icon: 1, time: 1500});
                            obj.update({
                                name: data.name,
                                description: data.description
                            });
                        } else {
                            layer.msg('更改部门信息失败: ' + res.msg, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('请求失败', {icon: 2});
                    }
                });
            } else if (layEvent == 'del') {
                layer.confirm('确定删除部门 <span style="color:#FF5722;font-weight:bold;">' + data.name + '</span> 吗？', {
                    title: '删除确认',
                    skin: 'layui-layer-molv',
                    icon: 3,
                    btn: ['确定','取消']
                }, function(index){
                    $.ajax({
                        url: '/depts/' + data.id,
                        type: 'delete',
                        success: function (res) {
                            if (res.code == 200) {
                                obj.del();
                                layer.msg('删除部门成功', {icon: 1, time: 1500});
                            } else {
                                layer.msg('删除部门失败: ' + res.msg, {icon: 2});
                            }
                            layer.close(index);
                        },
                        error: function() {
                            layer.msg('请求失败', {icon: 2});
                            layer.close(index);
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>